<template>
	<div class="topbar">
		<div class="city-entry">广州</div>
		<div class="switch-hot" @click="_curbar($event)">
			<router-link to="/home/hotshow">
				<div class="hot-item" :class="{active: nowIndex=='正在热映'}">正在热映</div>
			</router-link>
			<router-link to="/home/willshow">
				<div class="hot-item" :class="{active: nowIndex=='即将上映'}">即将上映</div>
			</router-link>
		</div>
		<div class="search-icon" @click="toSearch"></div>
	</div>
</template>
 
<script>
export default {
	data(){
		return {
			nowIndex: '正在热映',
		}
	},
	methods:{
		_curbar: function(event){
			this.nowIndex = event.target.innerText;
		},
		toSearch: function(){
			console.log(1)
			this.$router.push({path: '/search'})
		}
	}
}
</script>

<style lang="scss" scoped>
.topbar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e6e6e6;
	margin-bottom: 1px;
	.city-entry{
		padding-left: 15px;
	}
	.switch-hot{
		display: flex;
		height: 44px;
		line-height: 44px;
		.hot-item{
			width: 21vw;
			text-align: center;
			font-size: 15px;
			font-weight: 700;
			color: #666;
			margin: 0 12px;
		}
		.active{
			color: #ef4238;
			border-bottom: 2px solid #ef4238;
		}
	}
	.search-icon{
		width: 20px;
		height: 20px;
		background-image: url('../assets/search_r.png');
		background-repeat: no-repeat;
		background-size: 20px;
		margin-right: 15px;
	}
}
</style>
